<template>
  <div class="group-analysis">
    <el-row :gutter="20">
      <!-- 群体选择 -->
      <el-col :span="6">
        <div class="cluster-list">
          <div
              v-for="cluster in clusters"
              :key="cluster.id"
              class="cluster-item"
              :class="{ active: selectedCluster === cluster.id }"
              @click="selectCluster(cluster.id)"
          >
            <h4>{{ cluster.name }}</h4>
            <div class="stats">
              <span class="count">{{ cluster.count }}人</span>
              <el-tag
                  v-for="tag in cluster.tags"
                  :key="tag"
                  size="small"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 群体详情 -->
      <el-col :span="18">
        <div class="cluster-detail">
          <h3>{{ currentCluster?.name }}分析</h3>

          <!-- 特征雷达图 -->
          <radar-chart
              :dimensions="dimensionLabels"
              :scores="clusterAverages"
          />

          <!-- 对比热力图 -->
          <div class="heatmap-container">
            <heatmap-chart
                :data="comparisonData"
                :x-labels="comparisonGroups"
                :y-labels="dimensionLabels"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStudentStore } from '@/stores/studentStore'
import RadarChart from '@/components/RadarChart.vue'
import HeatmapChart from '@/components/HeatmapChart.vue'

const studentStore = useStudentStore()
const selectedCluster = ref(null)

// 示例聚类数据（实际应从后端获取）
const clusters = ref([
  {
    id: 1,
    name: '理论强-实践弱',
    count: 45,
    tags: ['高GPA', '低项目分'],
    features: [85, 62, 70, 80]
  },
  {
    id: 2,
    name: '创新突出型',
    count: 23,
    tags: ['竞赛获奖', '专利成果'],
    features: [75, 78, 92, 82]
  }
])

const dimensionLabels = ['学术能力', '实践能力', '创新能力', '综合素质']

// 当前选中群体数据
const currentCluster = computed(() =>
    clusters.value.find(c => c.id === selectedCluster.value)
)

// 群体平均分
const clusterAverages = computed(() =>
    currentCluster.value?.features || []
)

// 对比分析数据
const comparisonData = computed(() => {
  return clusters.value.map(cluster =>
      dimensionLabels.map((_, i) => cluster.features[i])
  )
})

const comparisonGroups = computed(() =>
    clusters.value.map(c => c.name)
)

const selectCluster = (id) => {
  selectedCluster.value = id
}
</script>

<style scoped>
.cluster-list {
  border-right: 1px solid #eee;
  padding-right: 20px;
}

.cluster-item {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: #409EFF;
    background-color: #f5f7fa;
  }

  &.active {
    border-color: #409EFF;
    background-color: #ecf5ff;
  }
}

.stats {
  display: flex;
  align-items: center;
  margin-top: 8px;

  .count {
    margin-right: 10px;
    color: #666;
  }

  .el-tag {
    margin-right: 5px;
  }
}

.heatmap-container {
  margin-top: 30px;
  height: 300px;
}
</style>